<template>
    <div class="avue-sidebar">
        <leftMessage />
        <div class="right-menu">
            <div v-for="(item, index) in [...menu].reverse()" :key="item.id" @click="handleMenuClick(item.path)"
                :class="routesVal === item.path ? 'menu-text-active' : 'menu-text'">
                <div class="glow-effect" v-if="routesVal === item.path"></div>
                <span>{{ item.name }}</span>
            </div>
        </div>
        <!-- <el-scrollbar class="avue-menu" style="width: 40%;height: 100%;">
      <div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip">
        {{ $t('menuTip') }}
      </div>
      <el-menu
        unique-opened
        :default-active="activeMenu"
        mode="horizontal"
        menu-trigger="click"
        :collapse="getScreen(isCollapse)"
        @open="handleMenuClick"
      >
        <sidebar-item :menu="menu"></sidebar-item>
      </el-menu>
    </el-scrollbar> -->
        <div class="user-content">
            <div class="avatar-container">
                <!-- 这里可以放头像图片 -->
                <img src="/img/user.png" class="avatar" />
            </div>
            <el-dropdown>
                <div class="user-title">
                    <span style="margin-top: 5px;">{{ userInfo.real_name }}</span>
                    <CaretBottom style="width: 14px; height: 14px;" />
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="toInfo">
                            <i class="icon-yonghu" />{{ $t('navbar.userinfo') }}
                        </el-dropdown-item>
                        <el-dropdown-item @click="handleLogOut" divided>
                            <i class="icon-tuichu" /> {{ $t('navbar.logOut') }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!-- <el-button type="primary" plain @click="handleLogOut">退出登录</el-button> -->
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import sidebarItem from './sidebarItem.vue';
import leftMessage from './leftMessage.vue';
import { samplingNotice } from '@/api/top/top';
import { ElNotification, ElButton } from 'element-plus'

export default {
    name: 'sidebar',
    components: { sidebarItem, leftMessage },
    data() {
        return {
            notification: null, // 用于存储通知实例
        };
    },
    inject: ['index'],
    created() {
        this.index.openMenu();
    },
    computed: {
        ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId', 'tagWel', 'routesVal', "userInfo"]),
        activeMenu() {
            const route = this.$route;
            const { meta, path } = route;
            if (meta.activeMenu) {
                return meta.activeMenu;
            }
            return path;
        },
    },
    mounted() {
        console.log('2333');
        this.initSamplingNotice();
        if (this.$store.state.common.mIsLogin) {
            this.$store.commit('SET_IS_REFRESH', false);
            if (this.menu.length != 0) {
                this.$store.commit('getRoutes', this.menu[0].path);
                this.menu.forEach(item => {
                    if (item.path === "/lcyw") {
                        this.$store.commit('getRoutes', item.path);
                    }
                })
            } else {
                this.$store.commit('getRoutes', "/lcyw");
            }
            setTimeout(() => {
                this.$store.commit('SET_IS_REFRESH', true);
                this.$store.commit('IS_LOGIN', false);
            }, 500);
        }
    },
    methods: {
        initSamplingNotice() {
            samplingNotice().then(res => {
                if (res.data.data && res.data.data > 0) {
                    // store.dispatch('showSampleNotification', res); // 更新 Vuex 状态
                    this.notification = ElNotification({
                        title: '取样通知',
                        duration: 0, // 设置为0则不自动关闭
                        max: 1,
                        message: h('div', null, [
                            h('p', null, "您有" + res.data.data + "份样本留取任务待处理！"),
                            h('div', { style: 'text-align: right; margin-top: 10px;' },
                                h(ElButton, {
                                    type: 'primary',
                                    size: 'small',
                                    onClick: () => {
                                        // 处理查看详情的逻辑
                                        this.$router.push({ path: '/samplingnotice/samplingNotice' })
                                        this.notification.close();
                                    }
                                }, '查看详情')
                            )
                        ]),
                        type: 'warning',
                    })

                }

            });

        },
        handleMenuClick(routes) {
            this.$store.commit('getRoutes', routes);
            this.$router.push(this.tagWel);
            // this.$router.push({
            //   name:"首页1",
            //   path:'/wel/indexs'
            // });
        },
        toInfo() {
            this.$router.push({ path: '/info/index' });
        },
        handleLogOut() {
            this.$confirm(this.$t('logoutTip'), this.$t('confirmTip'), {
                confirmButtonText: this.$t('submitText'),
                cancelButtonText: this.$t('cancelText'),
                type: 'warning',
            }).then(() => {
                this.$store.dispatch('LogOut').then(() => {
                    if (this.website.oauth2.ssoMode) {
                        window.location.href =
                            this.website.oauth2.ssoBaseUrl +
                            this.website.oauth2.ssoLogoutUrl +
                            this.website.oauth2.redirectUri;
                    } else {
                        this.$router.push({ path: '/login' });
                    }
                });
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.avue-sidebar {
    width: 100%;
    // height: auto;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #0c0360;
}

.right-menu {
    width: 44%;
    height: 100%;
    display: flex;
    align-items: center;
    // justify-content: flex-end;
    flex-direction: row-reverse;
    overflow: auto; // 横向滚动
    position: relative;
    white-space: nowrap; // 防止子元素换行

    // 子元素样式
    >div {
        flex-shrink: 0; // 禁止子元素被压缩
        margin-right: 10px; // 间距

        &:last-child {
            margin-right: 0; // 最后一个元素无右边距
        }
    }
}

/* Webkit 滚动条样式 */
.right-menu::-webkit-scrollbar {
    width: 12px;
}

.right-menu::-webkit-scrollbar-track {
    background-color: #0c0360;
    border-radius: 10px;
}

.right-menu::-webkit-scrollbar-thumb {
    background-color: #5e5896;
    border-radius: 10px;
}

.right-menu::-webkit-scrollbar-thumb:hover {
    background-color: #8884b2;
}

/* Firefox 滚动条样式 */
.right-menu {
    scrollbar-width: thin;
    scrollbar-color: #5e5896 #0c0360;
}

.menu-text,
.menu-text-active {
    width: auto;
    // min-width: 60px;
    height: 100%;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    margin-right: 30px;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    /* 新增定位 */
    z-index: 1;
}

/* 虚影效果 - 更亮的中心 */
.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* 扩大覆盖范围 */
    height: 100%;
    background: radial-gradient(circle at 50% 50%,
            rgba(59, 125, 252, 0.5) 0%,
            /* 中心更亮 */
            rgba(59, 125, 252, 0.2) 50%,
            transparent 100%);
    filter: blur(8px);
    /* 添加模糊增强效果 */
    pointer-events: none;
    z-index: 0;
}

/* 底部光效边框 */
.menu-text-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* 调整边框位置 */
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(59, 125, 252, 0.8) 50%,
            /* 中间最亮 */
            transparent 100%);
    opacity: 0.8;
}

.user-content {
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // margin-left: 2%;
}

.avatar-container {
    width: 2.6rem;
    /* 容器尺寸 */
    height: 2.6rem;
    border-radius: 50%;
    /* 圆形 */
    padding: 4px;
    /* 边缘宽度 */
    background: radial-gradient(circle farthest-corner at center center,
            #1a4fc4 0%,
            /* 中心颜色（更暗） */
            #3b7cfc 100%
            /* 边缘颜色 */
        );
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar {
    width: 50%;
    height: auto;
    // border-radius: 50%;
    object-fit: cover;
    /* 保持头像比例 */
    display: block;
    position: relative;
    z-index: 1;
}

/* 如果需要更明显的渐变效果，可以添加伪元素 */
.avatar-container::before {
    // content: '';
    // position: absolute;
    // top: 0;
    // left: 0;
    // right: 0;
    // bottom: 0;
    // border-radius: 50%;
    // background: radial-gradient(
    //   circle at center center,
    //   rgba(59, 124, 252, 0) 0%,
    //   rgba(59, 124, 252, 0.4) 100%
    // );
    // z-index: 0;
}

.user-title {
    color: #86879f;
    margin-left: 5px;
    font-size: 14px;
    display: flex;
    align-items: flex-end;
    margin-right: 30px;
    cursor: pointer;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>
